<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
	<script src="js/websocket.js"></script>
	<script src="js/weixin_utils.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4718687_km8s2y0m68m.css" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
		
		mui.plusReady(function(){
			
			// 获取设备信息
			plus.device.getInfo({
				success:function(e){
					// 连接websocket服务器
					ws.init({
						onopen:function(){
							console.info("客户端连接成功")
							var user = util.getUser();
							// 设备id
							var did = plus.device.getInfo;
							var param = {"did":e.uuid,"type":"msg","uid":user.id}
							sendObj(param);
						},
						onclose:function(){
							console.info("客户端连接关闭")
						},
						onmessage:function(data){
							var type = data.type;
							if(type == 'init') {
								// 初始化时向服务端发送client_id 用于绑定
								util.ajax({
									url: api.bingUid,
									data:{
										'client_id': data.client_id
									},
									success:function(resp){
										if (resp.code == 200 && resp.httpCode == 200) {
											plus.nativeUI.toast('绑定成功');
										} else if(resp.code == 1){
											plus.nativeUI.toast(resp.msg);
										}
									}
								});
							} else if(type == 'msg'){
								var fid = plus.webview.getWebviewById("chat_page_"+data.fid);
								// 显示聊天消息
								fid.evalJS("showMsg("+JSON.stringify(data)+")");
								// 保存聊天消息
								fid.evalJS("saveMsg("+JSON.stringify(data)+")");
							} else if(type == 'logout'){
								var client_id = data.client_id;
								// 调用接口 将用户状态改为离线
								util.ajax({
									url: api.connectLogout,
									data:{
										'client_id': data.client_id
									},
									success:function(resp){
									}
								});
							}
						}
					})
					
				},
				fail:function(e){
					console.info('获取设备信息失败: '+JSON.stringify(e));
				}
			});
			
			
			
			
			var pageArray = ["msg.html","friend.html","discovery.html","me.html"]
			var styles = {top:'0px','bottom':'50px',}
			// 遍历数组创建页面
			for(var i = 0;i<pageArray.length;i++){
				
				 var page = pageArray[i];
				 // console.info(page);
				
				//创建页面
				var newPage = plus.webview.create(page,page,styles);
				
				//给当前页面添加子页面
				var cpage = plus.webview.currentWebview();
				cpage.append(newPage);
				
				if(i != 0){
					newPage.hide();
				}
			}
			
			mui("nav").on('tap','a',function(){
				//获取id
				var id = this.getAttribute("id");
				
				//根据id获取页面
				var pageId = pageArray[id];
				
				//根据页面id找到页面对象
				plus.webview.getWebviewById(pageId).show();
			}) 
		})
		
		// 发送消息
		function sendContent(msgParam){
			sendObj(msgParam) // 转成对象
		}
		
    </script>
</head>
<body>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" id="0" style="touch-action: none;">
			<span class="mui-icon mui-icon-chatbubble iconfont icon-chat24gl-bubble"></span>
			<span class="mui-tab-label">微信</span>
		</a>
		<a class="mui-tab-item" id="1" style="touch-action: none;">
			<span class="mui-icon mui-icon-phone iconfont icon-chatweimingmingwenjianjia_tongxunlu"></span>
			<span class="mui-tab-label">通讯录</span>
		</a>
		<a class="mui-tab-item" id="2" style="touch-action: none;">
			<span class="mui-icon mui-icon-paperplane iconfont icon-chatfaxian"></span>
			<span class="mui-tab-label">发现</span>
		</a>
		<a class="mui-tab-item" id="3" style="touch-action: none;">
			<span class="mui-icon mui-icon-person iconfont icon-chatwo"></span>
			<span class="mui-tab-label">我</span>
		</a>
	</nav>
</body>
</html>